<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车系统</title>
</head>
<style>
    label {
        color: darkgoldenrod;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
    }

    tr,
    td,
    th {
        /* border-radius: 52%; */
        border: 1px solid;
        border-color: burlywood;
        /* font-size: larger; */
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        /* color: darkgoldenrod; */
    }

    table {
        border: 2px solid;
        border-color: burlywood;
    }
</style>

<body>
    <div id="app">
        <h1>欢迎来到购物车系统</h1>
        <table>
            <tr>
                <th>全选<input type="checkbox" v-model="allTak" @change="allT"></th>
                <th>ID</th>
                <th>序号</th>
                <th>商品名</th>
                <th>单价</th>
                <th>数量</th>
                <th>合计</th>
                <th>操作</th>
            </tr>
            <tr v-for="(i,index) in projects" :key='i.id'>
                <td><input type="checkbox" v-model='i.isTak' @change="isT"></td>
                <td>{{index+1}}</td>
                <td>{{i.id}}</td>
                <td>{{i.name}}</td>
                <td>{{i.price}}</td>
                <td>
                    <input type="button" value="-" @click="delBtn(index)" :disabled="i.count==1">
                    <label>{{i.count}}</label>
                    <input type="button" value="+" @click="addBtn(index)">
                </td>
                <td>{{i.price*i.count}}</td>
                <td>
                    <input @click="delDelBtn(index)" type="button" value="删除商品">
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <td>
                    总价：<label>{{prices}}</label>
                </td>
                <td>
                    折后价：<label>{{priced}}</label>
                </td>
                <td><input type="button" value="下单"></td>
                <td><label>(☞ﾟヮﾟ)☞预下单从速，打折只限今天！冲冲冲☜(ﾟヮﾟ☜)</label></td>
            </tr>
            <tr>
                <td>
                    商品名：
                </td>
                <td>
                    <input type="text" placeholder="请输入商品名" v-model='projects.name'>
                </td>
                <td>
                    单价：
                </td>
                <td>
                    <input type="text" placeholder="请输入价钱" v-model='projects.price'>
                </td>
                <td>
                    <input type="button" @click="addAddBtn" value="添加购物车">
                </td>
            </tr>
        </table>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            projects: list()
        },
        computed: {// 计算属性，自动
            prices: function () {
                let allPrice = 0;
                this.projects.forEach(i => {
                    if (i.isTak) {
                        allPrice += i.price * i.count
                    }
                });
                return allPrice
            },
            priced: function () {
                let dzPrice = 0;
                dzPrice += this.prices * 0.8
                return (dzPrice).toFixed(3)
            },
            allTak: {
                get: function () {
                    let a = this.projects.every(i => {
                        return i.isTak === true
                    })
                    return a
                },
                set: function () { }
            }
        },
        methods: {// 方法
            allT: function () {
                if (this.allTak) {
                    this.projects.forEach(i => {
                        i.isTak = false
                    });
                } else {
                    this.projects.forEach(i => {
                        i.isTak = true
                    })
                }
            },
            delDelBtn: function (id) {
                if (confirm('确定删除吗？')) {
                    this.projects.splice(id, 1);
                    alert('删除成功！');
                } else {
                    console.log('取消了删除！');
                }
            },
            addAddBtn: function () {
                if (this.projects.name !== 'undefined' && this.projects.price !== 'undefined' && this.projects.name !== '' && this.projects.price !== '' && parseFloat(this.projects.price) !== 'NaN') {
                    console.log(this.projects.name);
                    console.log(this.projects.price);
                    let obj = {
                        id: parseInt(this.projects[this.projects.length - 1].id + 1),
                        name: this.projects.name,
                        price: parseFloat(this.projects.price).toFixed(3),
                        count: 1,
                        isTak: false
                    }
                    this.projects.push(obj);
                    this.projects.name = '';
                    this.projects.price = '';
                } else {
                    alert('商品名和价钱不能为空，且价钱必须为数值类型！');
                }
            },
            addBtn: function (index) {
                console.log(index);
                this.projects[index].count++
            },
            delBtn: function (index) {
                console.log(index);
                this.projects[index].count--
            },
            isT: function () { },
        }
    })
    function list() {
        return [
            {
                id: 1,
                name: '青花瓷',
                price: 80200.000.toFixed(3),
                count: 1,
                isTak: false
            },
            {
                id: 2,
                name: '香水',
                price: 120.000.toFixed(3),
                count: 1,
                isTak: false
            },
            {
                id: 3,
                name: '薯片',
                price: 7.000.toFixed(3),
                count: 1,
                isTak: false
            },
            {
                id: 4,
                name: '可乐',
                price: 3.000.toFixed(3),
                count: 1,
                isTak: false
            },
            {
                id: 5,
                name: '口嚼酒',
                price: 1000.000.toFixed(3),
                count: 1,
                isTak: false
            }
        ]
    }
</script>

</html>